export const themes = [
  {
    name: "zinc",
    label: "Shadcn",
    cssVars: {
      light: {
        primary: "240 5.9% 10%",
        "primary-foreground": "0 0% 98%",
        secondary: "240 4.8% 95.9%",
        "secondary-foreground": "240 5.9% 10%",
        destructive: "0 72.22% 50.59%",
        "destructive-foreground": "0 0% 98%",
        ring: "240 5% 64.9%",
      },
      dark: {
        primary: "0 0% 98%",
        "primary-foreground": "240 5.9% 10%",
        secondary: "240 3.7% 15.9%",
        "secondary-foreground": "0 0% 98%",
        destructive: "0 62.8% 30.6%",
        "destructive-foreground": "0 85.7% 97.3%",
        ring: "240 4.9% 83.9%",
      },
    },
  },
  {
    name: "tomato",
    label: "Tomato",
    cssVars: {
      light: {
        primary: "10 78% 54%",
        "primary-foreground": "0 0% 93%",
        secondary: "12 100% 91%",
        "secondary-foreground": "8 50% 24%",
        ring: "10 78% 54%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "10 78% 54%",
        "primary-foreground": "0 0% 93%",
        secondary: "4 64% 19%",
        "secondary-foreground": "10 86% 89%",
        ring: "10 78% 54%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "red",
    label: "Red",
    cssVars: {
      light: {
        primary: "358 75% 59%",
        "primary-foreground": "0 0% 93%",
        secondary: "358 100% 93%",
        "secondary-foreground": "351 63% 24%",
        ring: "358 75% 59%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "358 75% 59%",
        "primary-foreground": "0 0% 93%",
        secondary: "348 68% 19%",
        "secondary-foreground": "350 100% 91%",
        ring: "358 75% 59%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "ruby",
    label: "Ruby",
    cssVars: {
      light: {
        primary: "348 75% 59%",
        "primary-foreground": "0 0% 93%",
        secondary: "351 100% 93%",
        "secondary-foreground": "344 63% 24%",
        ring: "348 75% 59%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "348 75% 59%",
        "primary-foreground": "0 0% 93%",
        secondary: "342 61% 19%",
        "secondary-foreground": "340 96% 91%",
        ring: "348 75% 59%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "crimson",
    label: "Crimson",
    cssVars: {
      light: {
        primary: "336 80% 58%",
        "primary-foreground": "0 0% 93%",
        secondary: "341 94% 93%",
        "secondary-foreground": "332 63% 24%",
        ring: "336 80% 58%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "336 80% 58%",
        "primary-foreground": "0 0% 93%",
        secondary: "331 62% 19%",
        "secondary-foreground": "330 91% 91%",
        ring: "336 80% 58%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "pink",
    label: "Pink",
    cssVars: {
      light: {
        primary: "322 65% 55%",
        "primary-foreground": "0 0% 93%",
        secondary: "323 79% 92%",
        "secondary-foreground": "320 70% 23%",
        ring: "322 65% 55%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "322 65% 55%",
        "primary-foreground": "0 0% 93%",
        secondary: "315 58% 19%",
        "secondary-foreground": "326 92% 91%",
        ring: "322 65% 55%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "plum",
    label: "Plum",
    cssVars: {
      light: {
        primary: "292 45% 51%",
        "primary-foreground": "0 0% 93%",
        secondary: "298 65% 92%",
        "secondary-foreground": "291 58% 23%",
        ring: "292 45% 51%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "292 45% 51%",
        "primary-foreground": "0 0% 93%",
        secondary: "297 42% 20%",
        "secondary-foreground": "300 59% 89%",
        ring: "292 45% 51%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "purple",
    label: "Purple",
    cssVars: {
      light: {
        primary: "272 51% 54%",
        "primary-foreground": "0 0% 93%",
        secondary: "277 81% 94%",
        "secondary-foreground": "270 50% 25%",
        ring: "272 51% 54%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "272 51% 54%",
        "primary-foreground": "0 0% 93%",
        secondary: "277 39% 22%",
        "secondary-foreground": "275 77% 92%",
        ring: "272 51% 54%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "violet",
    label: "Violet",
    cssVars: {
      light: {
        primary: "252 56% 57%",
        "primary-foreground": "0 0% 93%",
        secondary: "256 100% 95%",
        "secondary-foreground": "249 43% 26%",
        ring: "252 56% 57%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "252 56% 57%",
        "primary-foreground": "0 0% 93%",
        secondary: "256 42% 25%",
        "secondary-foreground": "249 94% 93%",
        ring: "252 56% 57%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "iris",
    label: "Iris",
    cssVars: {
      light: {
        primary: "240 60% 60%",
        "primary-foreground": "0 0% 93%",
        secondary: "238 100% 95%",
        "secondary-foreground": "238 43% 27%",
        ring: "240 60% 60%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "240 60% 60%",
        "primary-foreground": "0 0% 93%",
        secondary: "236 45% 27%",
        "secondary-foreground": "242 94% 94%",
        ring: "240 60% 60%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "indigo",
    label: "Indigo",
    cssVars: {
      light: {
        primary: "226 70% 55%",
        "primary-foreground": "0 0% 93%",
        secondary: "224 100% 94%",
        "secondary-foreground": "226 50% 24%",
        ring: "226 70% 55%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "226 70% 55%",
        "primary-foreground": "0 0% 93%",
        secondary: "225 54% 25%",
        "secondary-foreground": "224 100% 92%",
        ring: "226 70% 55%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "blue",
    label: "Blue",
    cssVars: {
      light: {
        primary: "206 100% 50%",
        "primary-foreground": "0 0% 93%",
        secondary: "203 100% 92%",
        "secondary-foreground": "216 71% 23%",
        ring: "206 100% 50%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "206 100% 50%",
        "primary-foreground": "0 0% 93%",
        secondary: "209 100% 19%",
        "secondary-foreground": "205 100% 88%",
        ring: "206 100% 50%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "cyan",
    label: "Cyan",
    cssVars: {
      light: {
        primary: "191 100% 39%",
        "primary-foreground": "0 0% 93%",
        secondary: "187 71% 88%",
        "secondary-foreground": "192 69% 17%",
        ring: "191 100% 39%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "191 100% 39%",
        "primary-foreground": "0 0% 93%",
        secondary: "193 100% 14%",
        "secondary-foreground": "190 80% 84%",
        ring: "191 100% 39%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "teal",
    label: "Teal",
    cssVars: {
      light: {
        primary: "173 80% 36%",
        "primary-foreground": "0 0% 93%",
        secondary: "166 62% 88%",
        "secondary-foreground": "174 65% 15%",
        ring: "173 80% 36%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "173 80% 36%",
        "primary-foreground": "0 0% 93%",
        secondary: "176 93% 12%",
        "secondary-foreground": "163 69% 81%",
        ring: "173 80% 36%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "jade",
    label: "Jade",
    cssVars: {
      light: {
        primary: "164 60% 40%",
        "primary-foreground": "0 0% 93%",
        secondary: "149 49% 89%",
        "secondary-foreground": "160 34% 17%",
        ring: "164 60% 40%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "164 60% 40%",
        "primary-foreground": "0 0% 93%",
        secondary: "161 69% 14%",
        "secondary-foreground": "155 69% 81%",
        ring: "164 60% 40%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "green",
    label: "Green",
    cssVars: {
      light: {
        primary: "151 55% 42%",
        "primary-foreground": "0 0% 93%",
        secondary: "140 49% 89%",
        "secondary-foreground": "155 40% 16%",
        ring: "151 55% 42%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "151 55% 42%",
        "primary-foreground": "0 0% 93%",
        secondary: "154 55% 15%",
        "secondary-foreground": "144 70% 82%",
        ring: "151 55% 42%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "grass",
    label: "Grass",
    cssVars: {
      light: {
        primary: "131 41% 46%",
        "primary-foreground": "0 0% 93%",
        secondary: "123 45% 90%",
        "secondary-foreground": "131 30% 18%",
        ring: "131 41% 46%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "131 41% 46%",
        "primary-foreground": "0 0% 93%",
        secondary: "134 33% 17%",
        "secondary-foreground": "120 61% 85%",
        ring: "131 41% 46%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "bronze",
    label: "Bronze",
    cssVars: {
      light: {
        primary: "18 20% 54%",
        "primary-foreground": "0 0% 93%",
        secondary: "19 33% 91%",
        "secondary-foreground": "12 22% 22%",
        ring: "18 20% 54%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "18 20% 54%",
        "primary-foreground": "0 0% 93%",
        secondary: "20 10% 17%",
        "secondary-foreground": "21 36% 89%",
        ring: "18 20% 54%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "gold",
    label: "Gold",
    cssVars: {
      light: {
        primary: "36 20% 49%",
        "primary-foreground": "0 0% 93%",
        secondary: "44 26% 89%",
        "secondary-foreground": "38 16% 20%",
        ring: "36 20% 49%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "36 20% 49%",
        "primary-foreground": "0 0% 93%",
        secondary: "43 8% 16%",
        "secondary-foreground": "36 25% 88%",
        ring: "36 20% 49%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "brown",
    label: "Brown",
    cssVars: {
      light: {
        primary: "28 34% 51%",
        "primary-foreground": "0 0% 93%",
        secondary: "29 43% 90%",
        "secondary-foreground": "19 15% 21%",
        ring: "28 34% 51%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "28 34% 51%",
        "primary-foreground": "0 0% 93%",
        secondary: "26 19% 16%",
        "secondary-foreground": "35 61% 87%",
        ring: "28 34% 51%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "orange",
    label: "Orange",
    cssVars: {
      light: {
        primary: "23 93% 53%",
        "primary-foreground": "0 0% 93%",
        secondary: "34 100% 85%",
        "secondary-foreground": "16 50% 23%",
        ring: "23 93% 53%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "23 93% 53%",
        "primary-foreground": "0 0% 93%",
        secondary: "28 100% 14%",
        "secondary-foreground": "30 100% 88%",
        ring: "23 93% 53%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "amber",
    label: "Amber",
    cssVars: {
      light: {
        primary: "42 100% 62%",
        "primary-foreground": "0 0% 13%",
        secondary: "50 100% 81%",
        "secondary-foreground": "24 40% 22%",
        ring: "42 100% 62%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "42 100% 62%",
        "primary-foreground": "0 0% 13%",
        secondary: "37 100% 12%",
        "secondary-foreground": "41 100% 85%",
        ring: "42 100% 62%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "yellow",
    label: "Yellow",
    cssVars: {
      light: {
        primary: "53 100% 58%",
        "primary-foreground": "0 0% 13%",
        secondary: "53 100% 79%",
        "secondary-foreground": "42 39% 20%",
        ring: "53 100% 58%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "53 100% 58%",
        "primary-foreground": "0 0% 13%",
        secondary: "48 100% 11%",
        "secondary-foreground": "53 79% 84%",
        ring: "53 100% 58%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "lime",
    label: "Lime",
    cssVars: {
      light: {
        primary: "81 80% 66%",
        "primary-foreground": "0 0% 13%",
        secondary: "76 63% 84%",
        "secondary-foreground": "75 39% 18%",
        ring: "81 80% 66%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "81 80% 66%",
        "primary-foreground": "0 0% 13%",
        secondary: "92 31% 16%",
        "secondary-foreground": "80 79% 85%",
        ring: "81 80% 66%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "mint",
    label: "Mint",
    cssVars: {
      light: {
        primary: "167 70% 72%",
        "primary-foreground": "0 0% 13%",
        secondary: "165 67% 87%",
        "secondary-foreground": "171 51% 17%",
        ring: "167 70% 72%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "167 70% 72%",
        "primary-foreground": "0 0% 13%",
        secondary: "178 100% 11%",
        "secondary-foreground": "156 71% 86%",
        ring: "167 70% 72%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
  {
    name: "sky",
    label: "Sky",
    cssVars: {
      light: {
        primary: "193 98% 74%",
        "primary-foreground": "0 0% 13%",
        secondary: "195 80% 90%",
        "secondary-foreground": "205 50% 23%",
        ring: "193 98% 74%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
      dark: {
        primary: "193 98% 74%",
        "primary-foreground": "0 0% 13%",
        secondary: "208 67% 20%",
        "secondary-foreground": "192 100% 88%",
        ring: "193 98% 74%",
        destructive: "0 84.2% 60.2%",
        "destructive-foreground": "0 0% 98%",
      },
    },
  },
] as const

export const grayColors = [
  {
    name: "zinc",
    label: "Shadcn",
    activeColor: {
      light: "240 5.9% 10%",
      dark: "240 5.2% 33.9%",
    },
    cssVars: {
      light: {
        background: "0 0% 100%",
        foreground: "240 10% 3.9%",
        card: "0 0% 100%",
        "card-foreground": "240 10% 3.9%",
        popover: "0 0% 100%",
        "popover-foreground": "240 10% 3.9%",
        muted: "240 4.8% 95.9%",
        "muted-foreground": "240 3.8% 46.1%",
        accent: "240 4.8% 95.9%",
        "accent-foreground": "240 5.9% 10%",
        border: "240 5.9% 90%",
        input: "240 5.9% 90%",
      },
      dark: {
        background: "240 10% 3.9%",
        foreground: "0 0% 98%",
        card: "240 10% 3.9%",
        "card-foreground": "0 0% 98%",
        popover: "240 10% 3.9%",
        "popover-foreground": "0 0% 98%",
        muted: "240 3.7% 15.9%",
        "muted-foreground": "240 5% 64.9%",
        accent: "240 3.7% 15.9%",
        "accent-foreground": "0 0% 98%",
        border: "240 3.7% 15.9%",
        input: "240 3.7% 15.9%",
      },
    },
  },
  {
    name: "olive",
    label: "Olive",
    cssVars: {
      light: {
        background: "120 20% 99%",
        foreground: "108 8% 12%",
        card: "120 17% 98%",
        "card-foreground": "108 8% 12%",
        popover: "120 17% 98%",
        "popover-foreground": "108 8% 12%",
        muted: "120 5% 88%",
        "muted-foreground": "108 8% 12%",
        accent: "120 7% 94%",
        "accent-foreground": "108 8% 12%",
        border: "120 3% 81%",
        input: "120 3% 81%",
      },
      dark: {
        background: "90 6% 7%",
        foreground: "120 6% 93%",
        card: "90 4% 9%",
        "card-foreground": "120 6% 93%",
        popover: "90 4% 9%",
        "popover-foreground": "120 6% 93%",
        muted: "100 3% 19%",
        "muted-foreground": "120 6% 93%",
        accent: "90 3% 13%",
        "accent-foreground": "120 6% 93%",
        border: "96 4% 27%",
        input: "96 4% 27%",
      },
    },
  },
  {
    name: "gray",
    label: "Gray",
    cssVars: {
      light: {
        background: "0 0% 99%",
        foreground: "0 0% 13%",
        card: "0 0% 98%",
        "card-foreground": "0 0% 13%",
        popover: "0 0% 98%",
        "popover-foreground": "0 0% 13%",
        muted: "0 0% 88%",
        "muted-foreground": "0 0% 13%",
        accent: "0 0% 94%",
        "accent-foreground": "0 0% 13%",
        border: "0 0% 81%",
        input: "0 0% 81%",
      },
      dark: {
        background: "0 0% 7%",
        foreground: "0 0% 93%",
        card: "0 0% 10%",
        "card-foreground": "0 0% 93%",
        popover: "0 0% 10%",
        "popover-foreground": "0 0% 93%",
        muted: "0 0% 19%",
        "muted-foreground": "0 0% 93%",
        accent: "0 0% 13%",
        "accent-foreground": "0 0% 93%",
        border: "0 0% 28%",
        input: "0 0% 28%",
      },
    },
  },
  {
    name: "mauve",
    label: "Mauve",
    cssVars: {
      light: {
        background: "300 20% 99%",
        foreground: "257 10% 14%",
        card: "270 20% 98%",
        "card-foreground": "257 10% 14%",
        popover: "270 20% 98%",
        "popover-foreground": "257 10% 14%",
        muted: "274 12% 89%",
        "muted-foreground": "257 10% 14%",
        accent: "285 14% 95%",
        "accent-foreground": "257 10% 14%",
        border: "258 11% 82%",
        input: "258 11% 82%",
      },
      dark: {
        background: "270 6% 7%",
        foreground: "240 6% 94%",
        card: "270 4% 10%",
        "card-foreground": "240 6% 94%",
        popover: "270 4% 10%",
        "popover-foreground": "240 6% 94%",
        muted: "264 5% 20%",
        "muted-foreground": "240 6% 94%",
        accent: "260 4% 14%",
        "accent-foreground": "240 6% 94%",
        border: "257 5% 29%",
        input: "257 5% 29%",
      },
    },
  },
  {
    name: "sage",
    label: "Sage",
    cssVars: {
      light: {
        background: "150 33% 99%",
        foreground: "154 12% 12%",
        card: "150 14% 97%",
        "card-foreground": "154 12% 12%",
        popover: "150 14% 97%",
        "popover-foreground": "154 12% 12%",
        muted: "140 5% 88%",
        "muted-foreground": "154 12% 12%",
        accent: "160 10% 94%",
        "accent-foreground": "154 12% 12%",
        border: "150 4% 80%",
        input: "150 4% 80%",
      },
      dark: {
        background: "150 6% 7%",
        foreground: "150 6% 93%",
        card: "150 4% 9%",
        "card-foreground": "150 6% 93%",
        popover: "150 4% 9%",
        "popover-foreground": "150 6% 93%",
        muted: "160 3% 19%",
        "muted-foreground": "150 6% 93%",
        accent: "150 3% 13%",
        "accent-foreground": "150 6% 93%",
        border: "156 4% 28%",
        input: "156 4% 28%",
      },
    },
  },
  {
    name: "sand",
    label: "Sand",
    cssVars: {
      light: {
        background: "60 20% 99%",
        foreground: "48 8% 12%",
        card: "60 8% 97%",
        "card-foreground": "48 8% 12%",
        popover: "60 8% 97%",
        "popover-foreground": "48 8% 12%",
        muted: "45 6% 88%",
        "muted-foreground": "48 8% 12%",
        accent: "30 7% 94%",
        "accent-foreground": "48 8% 12%",
        border: "48 5% 80%",
        input: "48 5% 80%",
      },
      dark: {
        background: "60 3% 6%",
        foreground: "60 6% 93%",
        card: "60 2% 10%",
        "card-foreground": "60 6% 93%",
        popover: "60 2% 10%",
        "popover-foreground": "60 6% 93%",
        muted: "60 3% 19%",
        "muted-foreground": "60 6% 93%",
        accent: "60 1% 13%",
        "accent-foreground": "60 6% 93%",
        border: "48 4% 28%",
        input: "48 4% 28%",
      },
    },
  },
  {
    name: "slate",
    label: "Slate",
    cssVars: {
      light: {
        background: "240 20% 99%",
        foreground: "210 13% 13%",
        card: "240 20% 98%",
        "card-foreground": "210 13% 13%",
        popover: "240 20% 98%",
        "popover-foreground": "210 13% 13%",
        muted: "230 11% 89%",
        "muted-foreground": "210 13% 13%",
        accent: "240 11% 95%",
        "accent-foreground": "210 13% 13%",
        border: "233 10% 82%",
        input: "233 10% 82%",
      },
      dark: {
        background: "240 6% 7%",
        foreground: "220 9% 94%",
        card: "220 6% 10%",
        "card-foreground": "220 9% 94%",
        popover: "220 6% 10%",
        "popover-foreground": "220 9% 94%",
        muted: "214 7% 19%",
        "muted-foreground": "220 9% 94%",
        accent: "225 6% 14%",
        "accent-foreground": "220 9% 94%",
        border: "213 8% 28%",
        input: "213 8% 28%",
      },
    },
  },
] as const

export type Theme = (typeof themes)[number]
export type ThemeColor = (typeof themes)[number]["name"]
export type Gray = (typeof grayColors)[number]

export type GrayColor = (typeof grayColors)[number]["name"]
